<template>
    <h2 style="margin-bottom: 20px;">当前位置：智能穿戴设备统计-{{ TITLE.equip1 }}</h2>
    <div style="display: flex;">
        <div style="padding: 0 12px;">
            <List id="box1" title="检测预警数据排名"></List>
            <div id="box2">
                <h3>检测预警数据分析</h3>
            </div>
        </div>
        <Box class="box"></Box>
        <div style="padding: 0 12px;">
            <div id="box3">
                <h3>人数异常情况</h3>
                <div style="display: flex;">
                    <div id="box31"></div>
                    <div id="box32"></div>
                </div>
            </div>
            <div id="box4">
                <h3>次数异常情况</h3>
                <div style="display: flex;">
                    <div id="box41"></div>
                    <div id="box42"></div>
                </div>
            </div>
        </div>
    </div>
    <div style="display: flex;">
        <div id="box5"></div>
        <div id="box6"></div>
        <div id="box7"></div>
        <div id="box8"></div>
        <div id="box9"></div>
        <div id="box10"></div>
    </div>
</template>

<script setup lang="ts">
import { EDP, TITLE } from "@b/model/enum";
import { Boxs } from "./charts_1/boxs";
import { Box2 } from "./charts_1/box2";
import { Box3 } from "./charts_1/box3";
import { Box4 } from "./charts_1/box4";
import List from "./charts_1/list.vue";
import Box from "./charts_1/box.vue";
import { onMounted, ref } from "vue";
const topBoxsHeight = ref(EDP.HEIGHT / 3 - 80 + 'px')
const topBoxsWidth = ref(EDP.WIDTH * 0.3 + 'px')
const topBoxWidth = ref(EDP.WIDTH * 0.4 + 'px')
const bottomBoxsHeight = ref(EDP.HEIGHT / 3 - 60 + 'px')
const bottomBoxsWidth = ref(EDP.WIDTH / 6 + 'px')
const box2 = new Box2(topBoxsWidth.value, topBoxsHeight.value)
const box3 = new Box3(topBoxsWidth.value, topBoxsHeight.value)
const box4 = new Box4(topBoxsWidth.value, topBoxsHeight.value)
const box5 = new Boxs(bottomBoxsWidth.value, bottomBoxsHeight.value)
const box6 = new Boxs(bottomBoxsWidth.value, bottomBoxsHeight.value)
const box7 = new Boxs(bottomBoxsWidth.value, bottomBoxsHeight.value)
const box8 = new Boxs(bottomBoxsWidth.value, bottomBoxsHeight.value)
const box9 = new Boxs(bottomBoxsWidth.value, bottomBoxsHeight.value)
const box10 = new Boxs(bottomBoxsWidth.value, bottomBoxsHeight.value)

onMounted(() => {
    box2.init()
    box2.changeData('')
    box3.init()
    box3.changeData('')
    box4.init()
    box4.changeData('')
    box5.init('box5', '心电')
    box5.changeData([])
    box6.init('box6', '血糖', ['#ffcf48', '#ff8033'])
    box6.changeData([])
    box7.init('box7', '血压', ['#60b565', '#58bcff'])
    box7.changeData([])
    box8.init('box8', '体温', ['#ee5946', '#ffcf48'])
    box8.changeData([])
    box9.init('box9', '心率', ['#91c9ff', '#60b565'])
    box9.changeData([])
    box10.init('box10', 'BMI', ['#5894ff', '#f2bd42'])
    box10.changeData([])
})
</script>

<style scoped>
.box {
    width: calc(v-bind(topBoxWidth));
    height: calc(v-bind(topBoxsHeight) * 2);
}

#box1,
#box2,
#box3,
#box4 {
    width: v-bind(topBoxsWidth);
    height: v-bind(topBoxsHeight);
}

#box5,
#box6,
#box7,
#box8,
#box9,
#box10 {
    width: v-bind(bottomBoxsWidth);
    height: v-bind(bottomBoxsHeight)
}
</style>